<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="办公用品-办公耗材-打印机-复印纸-政府采购-政府电商-B2B综合解决方案服务商">
	<meta name="description" content="领先未来科技集团有限公司，是国内一流的B2B综合解决方案服务商，专注于办公服务领域。为响应国家提出的阳光采购倡议，针对政企采购效率低、成本高、过程不透明的问题。">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0">
	<title>评论</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-size: 14px;
		}

		.container {
			font-family: "微软雅黑", arial, sans-serif;
			position: relative;
			margin: 0 auto;
		}

		.head {
			overflow: hidden;
			height: 80px;
			padding: 10px 0;
		}

		.head .logo {
			margin-left: 10px;
		}

		.head h4 {
			float: left;
			font-size: 40px;
			margin: 0;
			line-height: 80px;
		}

		.head .area {
			float: right;
			width: 200px;
			height: 60px;
			line-height: 60px;
			text-align: center;
			background-color: #e6e6e6;
		}

		.orderinfo {
			overflow: hidden;
		}

		.orderinfo dl {
			overflow: hidden;
			margin: 0;
		}

		.orderinfo dt{
			float: left;
			width: 80px;
			height: 30px;
			line-height: 30px;
			text-align: right;
		}

		.orderinfo dd {
			margin: 0 3px;
			display: inline-block;
			line-height: 30px;
			background-color:#fff;
			width: 50px;
			text-align: center;
			color: #666;
			border: 1px solid #ccc;
			border-radius: 4px;
		}
		.orderinfo dd.active {
			background-color: #399;
			color: #fff;
		}

		.userinfo {
			margin: 0;
		}
		.userinfo p{
			margin: 0 0 10px;
		}

		.userinfo h5 {
			min-width: 200px;
			font-size: 20px;
			display: inline-block;
			margin: 0;
		}

		.userinfo p span.tit {
			display: inline-block;
			width: 80px;
			text-align: right;
		}

		.skulist {
			width: 100%;
			border: 1px solid #666;
			border-right: 0;
			border-bottom: 0;
		}

		.skulist tr {
			border-bottom: 1px solid #666;
		}

		.skulist td {
			line-height: 30px;
			text-align: center;
			border-right: 1px solid #666;
			border-bottom: 1px solid #666;
		}

		.skulist thead {
			background-color: #e6e6e6;
		}
		.footer{
			margin-top:30px; 
		}
		.footer .l{
			border-right: 1px #333 dashed;
			width: 260px;
			float: left;
			text-align: center
		}
		.footer .l h4{
			font-size: 24px;
			margin: 10px 0;
		}
		.footer .l h5{
			font-size: 16px;
			margin: 10px;
		}
		.footer .l p{
			font-size: 12px;
			text-align: left;
			margin: 0 0 0 40px;
    		line-height: 20px;
		}
		.footer .r{
			margin:20px;
			padding-top: 1px;
		}
		.footer .r p{
			font-size: 14px;
			color: #666;
			margin: 5px 0;
		}
		.footer .r p strong{
			font-size: 16px;
			width: 100px;
			display: inline-block;
		}
		.footer .r dl{
			overflow: hidden;
			margin-top: 20px;
		}
		.footer .r dt{
			font-size: 16px;
			float: left;
			font-weight: bold;
			width: 100px;
			line-height: 40px;
		}
		.footer .r dd{
			font-size: 14px;
			border-bottom: 1px solid #333;
			margin-left: 100px;
			margin-right: 50px;
			height: 40px;
			line-height: 40px;
			text-align: right;
		}
		.form{
			margin: 20px 10px;
			text-align: center;
		}
		.form textarea{
			width: 100%;
			border:1px solid #bbb;
		}
		.form button{
			width: 50%;
			height: 40px;
			line-height: 40px;
			background: #399;
			border: none;
			color: #fff;
			border-radius: 6px;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="head">
			<img class="logo" src="" />
		</div>
		
		<div class="userinfo">
			<p><span class="tit">订单号：</span><span id="orderNo"></span></p>
			<p><span class="tit">发货单号：</span><span id="deliveryNo"></span></p>
			<p><span class="tit">客户名称：</span><span id="cusName"></span></p>
		</div>
		<div class="orderinfo">
			<dl>
				<dt>评论类型：</dt>
				<dd type="3">好评</dd>
				<dd type="2">中评</dd>
				<dd type="1">差评</dd>
			</dl>
		</div>
		<div class="form">
			<textarea rows="8" placeholder="1-200字以内" id="evaluateCon" maxlength="200"></textarea>
			<button onclick="submit();">提交评价</button>
		</div>
		<div class="footer">
			<div class="r">
				<!-- <p>订单业务员：xxx</p>
				<p>订单客服：xxx</p>
				<p>订单制单员：微信</p>-->
				<p>集团投诉热线：13366012315</p>
				<p>北京地区投诉热线：18911993075</p>
				<p>电商网站：<a href="https://www.66123123.com" target="_blank">www.66123123.com</a></p>
				<p>企业官网：<a href="http://corp.66123123.com" target="_blank">corp.66123123.com</a></p>
				<p>公司电话：010-66123123</p>
				<p>公司地址：北京市十里河朝阳区大羊坊路85号新华国际广场A座11层</p>
			</div>
		</div>
	</div>
</body>
<script src="https://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
	var selType,
		conDom = $('#evaluateCon');

	function submit(){
		if(!selType){
			alert("请选择评价类型~")
			return false;
		}
		if(conDom.val() == ""){
			alert("评论内容不能为空~")
			return false;
		}
		var params = {
			description:conDom.val(),
			level:selType
		}

		$.ajax({
			type: "POST",
			contentType:'application/json;charset=utf-8',
			url: `/api/order-service/order/delivery/${orderId}/evaluation`,
			data:  JSON.stringify(params),
			success: function (result) {
				alert("感谢您的评价！");
			},
			error: function (res,data) {
				var obj = JSON.parse(res.responseText);
				alert(obj.message || "对不起，评价提交失败");
			}
		});
	};

	function GetQueryString(name){
		var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
		var r = window.location.search.substr(1).match(reg);
		if(r!=null)return  decodeURIComponent(r[2]); return null;
	}

	var orderId = "";
	$(document).ready(function(){
		$("#orderNo").html(GetQueryString("orderNo"));
		orderId = GetQueryString("orderDeliveryId");
		$("#deliveryNo").html(GetQueryString("orderDeliveryNo"));
		$("#cusName").html(GetQueryString("customerName"));

		$(".orderinfo dd").bind('click', function(e){
			selType = $(this).attr('type');
			$(this).addClass("active").siblings().removeClass("active");
		})
	});
</script>
</html>